<template>
  <div>
    <!--三级分类 -->
    <el-card>
      <CategorySelector
        :isShow="isShow"
        :categoryList.sync="categoryList"
        :category3Id.sync="category3Id"
      ></CategorySelector>
    </el-card>
    <!-- 表格区域  v-if -->
    <div v-show="isShow" style="margin-top: 20px">
      <el-button
        type="primary"
        icon="el-icon-plus"
        style="margin-bottom: 10px"
        @click="addAttr"
        >添加属性</el-button
      >
      <el-table border stripe :data="categoryList">
        <el-table-column
          label="序号"
          type="index"
          align="center"
          width="80"
        ></el-table-column>
        <el-table-column label="属性名称" width="150" prop="attrName">
        </el-table-column>
        <el-table-column label="属性值列表">
          <template #default="{ row, $index }">
            <el-tag
              type="info"
              v-for="attrVal in row.attrValueList"
              class="mr-5"
              >{{ attrVal.valueName }}</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column label="操作" width="150">
          <template #default="{ row, $index }">
            <!-- 操作 编辑按钮 -->
            <el-button
              type="primary"
              size="mini"
              @click="handleEdit(row)"
              class="el-icon-edit"
            ></el-button>
            <!-- 操作 删除按钮 -->
            <el-button
              type="danger"
              size="mini"
              @click="deleteAttr(row)"
              class="el-icon-delete"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 添加属性值区域  v-else-->
    <div v-show="!isShow" style="margin-top: 20px">
      <el-form :inline="true" size="normal">
        <!-- 属性名 添加框 -->
        <el-form-item label="属性名">
          <el-input v-model="attrForm.attrName"></el-input>
        </el-form-item>
      </el-form>

      <el-button
        type="primary"
        icon="el-icon-plus"
        style="margin-bottom: 10px"
        :disabled="!attrForm.attrName"
        @click="addAttrValue"
        >添加属性值</el-button
      >
      <el-button style="margin-bottom: 10px" @click="goBack">取消</el-button>

      <!-- 属性值表格区域 -->
      <el-table
        border
        stripe
        :data="attrForm.attrValueList"
        style="margin-top: 15px"
      >
        <el-table-column
          label="序号"
          type="index"
          align="center"
          width="80"
        ></el-table-column>
        <el-table-column align="center" label="属性值名称">
          <template #default="{ row, $index }">
            <div v-if="row.inputVisible">
              <el-input
                type="text"
                size="small"
                v-model="row.valueName"
                ref="inputRef"
                @blur="inputBlur(row, $index)"
              ></el-input>
            </div>

            <div v-else @click="inputFocus(row)">{{ row.valueName }}</div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作">
          <template #default="{ row, $index }">
            <!-- 操作 删除按钮 -->
            <el-button
              type="danger"
              size="mini"
              @click="deleteAttrValue(row, $index)"
              class="el-icon-delete"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 底部按钮区域 -->
      <el-button
        style="margin-top: 20px"
        type="primary"
        size="default"
        @click="saveAttrInfo"
        >保存</el-button
      >
      <el-button size="default" @click="goBack">取消</el-button>
    </div>
  </div>
</template>

<script>
import attrApi from "@/api/attr";
import { Message } from "element-ui";
export default {
  data() {
    return {
      categoryList: [], // 属性值列表
      isShow: true, // 控制属性 属性值页面显示隐藏
      category3Id: "", // 三级分类 3 Id
      attrForm: this.initAttrForm(), //新增属性值数组
    };
  },
  //   methods
  methods: {
    // 用于初始化的 attrForm
    initAttrForm() {
      return {
        attrName: "",
        categoryId: this.category3Id,
        categoryLevel: "3",
        attrValueList: [],
      };
    },
    //点击编辑 数据回显  if
    handleEdit(row) {
      this.isShow = false;
      this.attrForm = JSON.parse(JSON.stringify(row));
    },

    // 删除if
    async deleteAttr(row) {
      try {
        await attrApi.deleteAttr(row.id);
        // 重新获取数据
        this.$bus.$emit("getAttrInfo");
      } catch (error) {
        console.error("删除失败");
      }
    },

    // 控制 属性 属性值 页面切换区域
    addAttr() {
      this.isShow = false;
      this.attrForm = JSON.parse(JSON.stringify(this.initAttrForm()));
    },
    // 添加属性值
    addAttrValue() {
      this.attrForm.attrValueList.push({
        valueName: "",
        inputVisible: true,
      });
      // 聚焦到输入框
      this.$nextTick(function () {
        this.$refs.inputRef.focus();
      });
    },
    // 点击属性值 显示输入框 聚焦
    inputFocus(row) {
      row.inputVisible = true;
      this.$nextTick(() => {
        this.$refs.inputRef.focus();
      });
    },
    // 输入框失焦
    inputBlur(row, index) {
      row.inputVisible = false;
    },
    // 返回
    goBack() {
      this.isShow = true;
    },

    // 删除属性值 else
    deleteAttrValue(row, index) {
      this.attrForm.attrValueList.splice(index, 1);
    },

    //   点击保存
    async saveAttrInfo() {
      try {
        this.isShow = true;
        await attrApi.saveAttrInfo(this.attrForm);
        this.attrForm.categoryLevel = this.category3Id;
        // 重新获取数据
        this.$bus.$emit("getAttrInfo");
        Message.success("保存成功");
      } catch (error) {
        Message.warning("保存失败");
      }
    },
  },
  watch: {
    // 监听3id
    categoryList: {
      handler(nval, oval) {
        if (nval) {
          this.categoryList = nval;
        }
      },
    },
    // 获取3id
    category3Id: {
      handler(nval, oval) {
        if (nval) {
          this.category3Id = nval;
        }
      },
    },
  },

  mounted() {},
};
</script>
<style lang=""></style>
